<template>
  <view class="view-contain">
    <public-module :title="title" />
    <view class="content u-flex u-flex-wrap">
      <view class="item-row" v-for="(item, index) in 4" :key="index">
        <view
          class="item-layout u-flex-y u-flex-items-center"
          v-for="(subItem, subIndex) in 3"
          :key="subIndex"
          @click="navigateTo(index * 3 + subIndex)"
        >
          <fr-icon-notes
            v-if="index * 3 + subIndex < 5"
            theme="multi-color"
            :size="64"
            :fill="['#000000']"
          />
          <fr-icon-search
            v-if="index * 3 + subIndex === 5"
            theme="multi-color"
            :size="64"
            :fill="['#000000']"
          />
          <fr-icon-plan
            v-if="index * 3 + subIndex === 6"
            theme="multi-color"
            :size="64"
            :fill="['#000000']"
          />
          <view>
            {{ getItemTitle(index * 3 + subIndex) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: '学习中心'
    };
  },
  onShareAppMessage() {
  	return {
  		title: '苏榜小程序邀请您一起使用',
  		imageUrl: "../../static/img/share.jpg",
  		path: '/pages/index/index'
  	}
  },
  methods: {
	 
    navigateTo(index) {
      const routes = [
        '/pages/experience/index',
        '/pages/guideline/index',
        '/pages/currentpolitics/index',
        '/pages/post/index',
        '/pages/study/index',
        '/pages/review/index',
        // '/pages/inspector/index',
		'/pages/fortune/index' 
      ];
      uni.navigateTo({
        url: routes[index]
      });
    },
    getItemTitle(index) {
      const titles = [
        '大神经验',
        '上岸攻略',
        '时政热点',
        '岗位筛选',
        '学习打卡',
        '模考复盘',
        '今日运势'
      ];
      return titles[index] || '';
    }
  }
};
</script>

<style lang="scss" scoped>
	.top_image{
		width: 100%;
		img{
			width: 100%;
		}
	}
.view-contain {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item-row {
      width: 100%;
      display: flex;
      margin-bottom: 20rpx;
    }

    .item-layout {
      flex: 1;
      text-align: center;
      margin: 0 10rpx;
      padding: 20rpx;
      width: calc(33.333% - 20rpx); // Adjust the width to ensure three items per row
    }
  }
}
</style>